import React from 'react';
import './index.scss';
import { Row, Col, Divider } from "antd";
import ReactMarkdown from 'react-markdown'
import CodeBlock from "../../utils/CodeBlock";
import InfoNavBar from '../InfoNavBar';
import Comment from '../Comment';
import { connect } from 'react-redux';

@connect(
    state => ({
        blogInfoData: state.blogInfo.blogInfoData,
        e_width: state.app.e_width
    }),
    {}
)

class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            markdown: '',
            isLike: false,
            likeNum: 0
        };
    }

    render() {
        const content = this.props.blogInfoData.content
        return (
            <div className="container">
                <InfoNavBar markdown={content} e_width={this.props.e_width} />
                <Row>
                    <Col xs={1} sm={1} md={1} lg={4} xl={4}></Col>
                    <Col xs={22} sm={22} md={22} lg={16} xl={16} >
                        <div className="blog-container" >
                            {/* 博客内容 */}
                            <ReactMarkdown source={content}
                                renderers={{
                                    code: CodeBlock
                                }}
                                escapeHtml={false}>
                            </ReactMarkdown>
                            {/* Link分割线 */}
                            <Divider>
                                <span style={{ fontFamily: 'fantasy' }}>Comment</span>
                            </Divider>
                            {/* 评论区 */}
                            <Comment />
                        </div>
                    </Col >
                    <Col xs={1} sm={1} md={1} lg={4} xl={4}></Col>
                </Row>
            </div>
        );
    }
}



export default index;